<script setup>
import { onMounted, ref } from "vue";
import Carousel from "../common/swiper.vue";
import { ArrowForward } from "@vicons/ionicons5";
import Modal from "../common/Modal.vue"
import arrowLeft from "../assets/arrow-left.png"
import { getRequest, postRequest } from "@/api";
import success from '../assets/dui.png'
import Chakanimg from '../assets/image.png.png'


const isModalVisible = ref(false);
const opsition = ref('');
const modelPhoneNumber = ref('');
const position = ref('');
const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'

// const position = ref(null);
const teamItems = ref({});
const teamItemsImages = ref({});
const pages = ref(0);
const pagesTwoItems = ref({});
const caseShowItem = ref({});
const caseShowItemBanner = ref({});
const caseStyleId = ref('');
const pagesTwoRecommend = ref({});


onMounted(() => {
  Request();
  window.scrollTo(0, 0);
})

const items = [
  {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  }, {
    img: 'https://fastly.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE',
    text: '法式风格 |  128m²'
  },
]
const hoverStatus = ref(Array(items.length).fill(false));
const setHovered = (index, status) => {
  hoverStatus.value[index] = status;
};

const showBookingModal = () => {
  isModalVisible.value = true;
};

const hideBookingModal = () => {
  isModalVisible.value = false;
};

const Request = () => {
  getRequest('/team_index').then(res => {
    console.log('/team_index', res);
    teamItemsImages.value = res.images;
    teamItems.value = res;
    const jsonItem = res.recommend;
  })
}


const allClickItem = (item) => {
  const ids = item.id;
  getRequest('/designer_case', { id: ids }).then(res => {
    console.log('designer_case', res)
    pagesTwoItems.value = res;
    pagesTwoRecommend.value = res.recommend
  })
  pages.value = 1;
  window.scrollTo(0, 0);
}


const allClick = (item) => {
  caseStyleId.value = item.id;
  window.scrollTo(0, 0);
  if (item.case_is_essay === 20) {
    pages.value = 2;
    postRequest('/case_show', { id: caseStyleId.value }).then(res => {
      console.log('iqidiki mazmun', res);
      caseShowItem.value = res;
      caseShowItemBanner.value = res.case_top_images;
    })
  } else if (item.case_is_essay === 10) {
    window.open(item.case_url)
  }
}

const backClick = () => {
  pages.value--;
  window.scrollTo(0, 0);
}


const options = [
  {
    label: "天山区",
    value: '天山区',
  },
  {
    label: '沙依巴克区',
    value: '沙依巴克区'
  },
  {
    label: '新市区',
    value: '新市区'
  },
  {
    label: "水磨沟区",
    value: '水磨沟区',
  },
  {
    label: '头屯河区',
    value: '头屯河区'
  },
  {
    label: '达坂城区',
    value: '达坂城区'
  },
  {
    label: '米东区',
    value: '米东区'
  },
  {
    label: '乌鲁木齐县',
    value: '乌鲁木齐县',
  },
];

const handlePositionChange = (e) => {
  const selectedValue = e.target.value;
  position.value = selectedValue
}

const modeSubClick = () => {
  const phoneNumber = document.getElementById('modelPhoneNumber').value.trim(); // 使用一个新的变量名，避免冲突
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (phoneNumber && phoneRegex.test(phoneNumber)) {
    postRequest('/quote_message', {
      quote_area: position.value,
      quote_tel: phoneNumber // 直接使用新的变量名 phoneNumber
    }).then(res => {
      if (res.code === 200) {
        alert('成功');
        isModalVisible.value = false
      }
    });
  } else {
    alert('请输入正确的手机号');
  }
};

</script>

<template>


  <div class="team-strength" v-if="pages === 0">
    <div class="imgtop">
      <img :src="imgDefultUrl + teamItemsImages.swiper_avatar">
      <div class="overlay-text">
        <div style="font-size:9rem;font-weight: 600;">{{ teamItemsImages.swiper_title }}</div>
        <div style="font-size: 1.5rem;font-weight: 300;letter-spacing: .0625rem;">{{ teamItemsImages.swiper_describe }}
        </div>
      </div>
    </div>

    <div class="swiper-item">
      <Carousel :parentWidth="97.375" :parentHeight="33.75" :slides="teamItems.recommend">
        <template v-for="(slide, index) in teamItems.recommend" :key="index" v-slot:[`slide-${index}`]>
          <div class="content-box">
            <div class="image" :style="{ backgroundImage: 'url(' + imgDefultUrl + slide.team_avatar + ')' }"></div>
            <div class="text-box">
              <div style="font-weight: 700;letter-spacing: .0625rem;">{{ slide.team_name }}</div>
              <div
                style="color: rgba(241, 137, 27, 1);font-size: 1.25rem;width: 12rem;
height: 1.5rem;font-weight: 500;width: 14.875rem;height: 2.5rem;border: .0625rem solid rgba(56, 56, 56, 1);display: flex;align-items: center;justify-content: center;letter-spacing: .0625rem;">
                从事室内设计行业{{ slide.team_experience }}年
              </div>
              <div style="font-size: 1.375rem;color: rgba(241, 137, 27, 1);font-weight: 400;letter-spacing: .0625rem;">
                擅于风格：
                <span style="color: black;">
                  <template v-for="(style, index) in slide.team_stype">
                    <span v-if="index > 0">, </span>{{ style }}
                  </template>
                </span>
              </div>
              <div style="font-size: 1.375rem;color: rgba(241, 137, 27, 1);font-weight: 400;letter-spacing: .0625rem;">
                代表作品：
                <span style="color: black;">{{ slide.team_works }}</span>
              </div>
              <div class="btn" @click="showBookingModal">
                <text>预约设计师</text>
                <img style="width: 3.1875rem;" :src="arrowLeft">
              </div>
            </div>
          </div>
        </template>
      </Carousel>
    </div>


    <div
      style="margin-top: 12rem;font-size: 3.75rem;width: 100%;text-align: center;font-weight: 300;letter-spacing: .0625rem;">
      认识我们的团队成员
    </div>

    <div class="tabs-item-box">
      <div class="grid-container">
        <div v-for="(item, index) in teamItems.team" :key="index" :class="{ 'grid-item-hovered': hoverStatus[index] }"
          class="grid-item" @mouseleave="setHovered(index, false)" @mouseover="setHovered(index, true)">
          <div class="grid-image-container">
            <img :src="imgDefultUrl + item.team_avatar" class="grid-img">
          </div>
          <div class="grid-overlay" v-if="hoverStatus[index]">
            <div class="overlay-subtext">
              <div class="top-title">{{ item.team_name }}</div>
              <div class="top-time">从业年限：{{ item.team_experience }}年</div>
              <div class="top-two">首席室内设计师</div>
              <div style="font-size: 1.375rem;font-weight: 400;color: rgba(241, 137, 27, 1);margin-top: 1.25rem;">擅于风格：
                <template v-for="(style, index) in item.team_stype">
                  <span v-if="index > 0">, </span><span style="color: #fff;">{{ style }}</span>
                </template>
              </div>
              <div class="overlay-subtext-btn">
                <div class="subtext-btn" @click="allClickItem(item)">查看案例</div>
                <div class="subtext-btn" @click="() => isModalVisible = true">预约设计师</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>


  <div v-if="pages === 1" class="pages-two-box">
    <div class="imgtop">
      <img :src="imgDefultUrl + teamItemsImages.swiper_avatar">
      <div class="overlay-text">{{ teamItemsImages.swiper_title }}</div>
    </div>
    <div class="yuyue-shejishi">
      <div class="yuyue-top-box">
        <!-- {{ pagesTwoRecommend.team_name }} -->
        <div class="yuyue-top-title">免费预约设计师</div>
        <input class="input-one" type="text" placeholder="输入姓名">
        <input class="input-one" type="text" placeholder="输入手机号">
        <button class="yuyue-btn" @click="() => isModalVisible = true">立即预约</button>
      </div>
      <div class="yuyue-content">
        <img :src="imgDefultUrl + pagesTwoRecommend.team_avatar">
        <div class="content-text-box">
          <div class="text-box-title">{{ pagesTwoRecommend.team_name }}-首席设计师</div>
          <div class="text-box-time">从事室内设计行业{{ pagesTwoRecommend.team_experience }}年</div>
          <div style="font-size: 1.375rem;color: rgba(241, 137, 27, 1);font-weight: 400;letter-spacing: .0625rem;">
            擅于风格：
            <span style="color: black;">
              <template v-for="(style, index) in pagesTwoRecommend.team_stype">
                <span v-if="index > 0">, </span>{{ style }}
              </template>
            </span>
          </div>
          <div style="font-size: 1.375rem;color: rgba(241, 137, 27, 1);font-weight: 400;">
            代表作品：<span style="font-size: 1.375rem;font-weight: 400;color: rgba(56, 56, 56, 1)">
              {{ pagesTwoRecommend.team_works }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="title">代表案例</div>
    <div class="tabs-item-box">
      <div class="grid-container">
        <div v-for="(item, index) in pagesTwoItems.case" :key="index"
          :class="{ 'grid-item-hovered': hoverStatus[index] }" class="grid-item" @mouseleave="setHovered(index, false)"
          @mouseover="setHovered(index, true)" @click="allClick(item)">
          <div class="grid-image-container">
            <img :src="imgDefultUrl + item.case_avatar" class="grid-img">
            <div class="overlay-text">{{ item.case_style_id }} | {{ item.case_square }}m²</div>
          </div>
          <div class="grid-overlay" v-if="hoverStatus[index]">
            <div class="overlay-subtext">
              <div class="top-title">{{ item.case_style_id }} | {{ item.case_square }}m²</div>
              <div class="top-two">精致装修</div>
              <img class="top-arrow" :src="arrowLeft">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button @click="backClick">更多案列</button>
    </div>
  </div>


  <div class="caseShow" v-if="pages === 2">
    <div class="topimage">
      <img :src="Chakanimg">
      <div class="topimage-title">创建激励和服务的结构</div>
    </div>
    <div class="swiper-box">
      <div class="swiper">
        <n-carousel show-arrow :autoplay="true" :interval="3000">
          <template v-for="image in caseShowItemBanner">
            <img class="carousel-img" :src="imgDefultUrl + image">
          </template>
        </n-carousel>
      </div>
      <div class="swiper-content">
        <div style="font-size: 2.5rem;font-weight: 500;">{{ caseShowItem.case_title }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">面积：{{
          caseShowItem.case_total_area
        }}平方米
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">建筑面积：{{
          caseShowItem.case_building_area
        }}平方米
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">层数：{{
          caseShowItem.case_floors
        }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">房间：{{ caseShowItem.case_rooms }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">浴室：{{
          caseShowItem.case_bathrooms
        }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">位置：{{
          caseShowItem.case_location
        }}
        </div>
      </div>
    </div>
    <div class="item-content-box">
      <div class="content-title">项目概述</div>
      <div class="content-hr-hr"></div>
      <div style="width: 81.5%;" v-html="caseShowItem.case_content"></div>

    </div>
    <div class="two-box-items">
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">挑战</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">解决方案</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button @click="backClick">更多案列</button>
    </div>
    <div class="bottom-add">
      <div class="add-title">我们的团队随时准备提供帮助。现在就联系我们，了解如何提供帮助。</div>
      <div class="lianxi">联系</div>
    </div>
  </div>


  <Modal :isVisible="isModalVisible" @close="hideBookingModal">
    <div class="prup">
      <div class="top">免费预约</div>
      <div class="p-content">
        <div class="position">
          <select class="select-item" @change="handlePositionChange">
            <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
          </select>
        </div>
        <div class="numberinput">
          <input
            style="width: 37.375rem;height: 3.9419rem;display: flex;align-items: center;padding-left: .625rem;border: .0625rem solid rgba(128, 128, 128, 1);outline: none;"
            type="text" id="modelPhoneNumber" v-model="modelPhoneNumber" placeholder="请输入您的手机号码" />
        </div>
        <div class="sub-btn-box">
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost color="rgba(241, 137, 27, 1)"
            @click="modeSubClick">
            提交
          </n-button>
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost @click="() => isModalVisible = false">
            取消
          </n-button>
        </div>
      </div>
    </div>
  </Modal>


</template>

<style scoped lang="less">
.team-strength {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 8.6875rem;
  padding-top: 7.5rem;
  overflow: hidden;
  // margin-top: 7.5rem;

  .imgtop {
    position: relative;
    width: 97.375rem;
    height: 38.3125rem;

    img {
      width: 100%;
      height: 100%;
    }

    .overlay-text {
      position: absolute;
      top: 30%;
      left: 3%;
      padding: .625rem;
      color: rgba(255, 255, 255, 1);
      height: 19.25rem;
      width: 43.25rem;
    }
  }

  .swiper-item {
    margin-top: 9.1875rem;
    margin: 3.125rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


    .content-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 97.375rem;
      height: 33.75rem;
      box-shadow: 0rem .625rem 2.25rem rgba(0, 0, 0, 0.16), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, 0.06);

      .image {
        width: 34.75rem;
        height: 33.8rem;
        background-size: cover;
        background-position: 50% 0%;
      }

      .text-box {
        width: 63.625rem;
        height: 100%;
        background: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 2em;
        padding-left: 3.125rem;

        .btn {
          position: relative;
          bottom: .75rem;
          left: 37.5rem;
          width: 17.9375rem;
          height: 4.4375rem;
          background-color: rgba(241, 137, 27, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.875rem;
        }
      }
    }
  }

  .tabs-item-box {
    margin-top: 5.8625rem;
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;


    .grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: .9375rem;
      justify-content: space-between;
      max-width: calc(3 * 31.2275rem + 2 * .625rem);

      .grid-item {
        position: relative;
        width: 30.9775rem;
        height: 39.6875rem;
        background: rgba(255, 255, 255, 1);
        transition: background-color 0.3s ease;

        .grid-image-container {
          position: relative;
          width: 100%;
          height: 100%;

          .grid-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: 50% 0%;
          }

          .overlay-text {
            position: absolute;
            width: 100%;
            bottom: 1.25rem;
            color: white;
            font-size: 2.25rem;
            font-weight: 400;
            opacity: 1;
            font-weight: 400;
            letter-spacing: .0625rem;
            transition: opacity 0.3s ease;
            z-index: 1;
            text-align: center;
          }
        }


        .grid-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          transition: opacity 0.3s ease;
          // z-index: 1;

          .overlay-text {
            color: white;
            font-size: 2.25rem;
            text-align: center;
            margin-bottom: 1.25rem;
          }

          .overlay-subtext {
            position: relative;
            width: 18.6875rem;
            height: 12.4375rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .top-title {
              font-size: 3rem;
              font-weight: 900;
              color: rgba(255, 255, 255, 1);
            }

            .top-time {
              margin-top: .875rem;
              width: 9.0625rem;
              height: 1.625rem;
              font-size: 1.375rem;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }

            .top-two {
              margin-top: .625rem;
              font-size: 1.375rem;
              font-weight: 400;
              letter-spacing: .0625rem;
              color: rgba(255, 255, 255, 1);
            }

            .overlay-subtext-btn {
              margin-top: 6.875rem;
              width: 25.1112rem;
              height: 4.5rem;
              display: flex;
              align-items: center;
              justify-content: space-evenly;

              .subtext-btn {
                width: 12.1738rem;
                height: 4.5rem;
                opacity: 1;
                background: rgba(255, 255, 255, 1);
                border: .0625rem solid rgba(56, 56, 56, 1);
                font-size: 1.5rem;
                font-weight: 400;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(241, 137, 27, 1);
              }
            }
          }
        }

        &:hover .grid-overlay {
          opacity: 1;
        }
      }

      .grid-image-container:hover .grid-overlay {
        opacity: 1;
      }

      .grid-item:hover .overlay-text {
        opacity: 0;
        /* 鼠标悬停时隐藏默认的文字 */
      }
    }
  }
}

.pages-two-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 8.6875rem;
  padding-top: 7.5rem;
  overflow: hidden;

  .imgtop {
    position: relative;
    width: 97.375rem;
    height: 38.3125rem;

    img {
      width: 100%;
      height: 100%;
    }

    .overlay-text {
      position: absolute;
      top: 55%;
      left: 10%;
      transform: translate(-50%, -50%);
      padding: .625rem;
      font-size: 1.5rem;
      color: rgba(255, 255, 255, 1);
    }
  }

  .yuyue-shejishi {
    margin: 11rem;
    width: 97.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    box-shadow: 0rem .1875rem .5rem rgba(0, 0, 0, 0.24);

    .yuyue-top-box {
      width: 97.375rem;
      height: 7.875rem;
      background: rgba(56, 56, 56, 1);
      display: flex;
      align-items: center;

      .yuyue-top-title {
        padding-left: 5.5rem;
        height: 2.375rem;
        font-size: 2rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
      }

      .input-one {
        margin: 1.6875rem;
        opacity: 1;
        border: .0625rem solid rgba(255, 255, 255, 1);
        width: 21.9237rem;
        height: 4.5625rem;
        background: transparent;
        font-size: 2rem;
        font-weight: 300;
        color: rgba(166, 166, 166, 1);
        padding-left: 1.25rem;
      }

      .yuyue-btn {
        width: 14.5625rem;
        height: 4.5625rem;
        font-size: 2rem;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
        background: rgba(255, 255, 255, 1);

        border: .0625rem solid rgba(229, 229, 229, 1);
      }
    }

    .yuyue-content {
      width: 100%;
      height: 36.125rem;
      display: flex;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rem .1875rem .5rem rgba(0, 0, 0, 0.24);

      img {
        width: 36.125rem;
        height: 36.125rem;
      }

      .content-text-box {
        padding-left: 1.6875rem;
        height: 100%;
        width: 50.6875rem;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;

        .text-box-title {
          height: 2.375rem;
          font-size: 2rem;
          font-weight: 700;
          color: rgba(56, 56, 56, 1);

        }

        .text-box-time {
          width: 14.875rem;
          height: 2.5rem;
          border: .0625rem solid rgba(56, 56, 56, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.25rem;
          font-weight: 500;
          color: rgba(241, 137, 27, 1);
        }
      }
    }
  }

  .title {
    color: rgba(0, 0, 0, 1);
    font-size: 3.75rem;
    font-weight: 300;
    border-bottom: .0625rem solid black;
    display: inline-block;
  }

  .tabs-item-box {
    margin-top: 5.8625rem;
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;


    .grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: .9375rem;
      justify-content: space-between;
      max-width: calc(3 * 31.2275rem + 2 * .625rem);

      .grid-item {
        position: relative;
        width: 30.9775rem;
        height: 35.8575rem;
        background: rgba(255, 255, 255, 1);
        transition: background-color 0.3s ease;

        .grid-image-container {
          position: relative;
          width: 100%;
          height: 100%;

          .grid-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .overlay-text {
            position: absolute;
            width: 100%;
            bottom: 2.5625rem;
            color: white;
            font-size: 2.25rem;
            font-weight: 400;
            opacity: 1;
            font-weight: 400;
            letter-spacing: .0625rem;
            transition: opacity 0.3s ease;
            z-index: 1;
            text-align: center;
          }
        }


        .grid-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          transition: opacity 0.3s ease;
          z-index: 2;

          .overlay-text {
            color: white;
            font-size: 2.25rem;
            text-align: center;
            margin-bottom: 1.25rem;
          }

          .overlay-subtext {
            position: relative;
            width: 18.6875rem;
            height: 12.4375rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .top-title {
              font-size: 1.875rem;
              font-weight: 500;
              color: #fff;
            }

            .top-two {
              font-size: 1.5rem;
              font-weight: 300;
              color: rgba(241, 137, 27, 1);
            }

            .top-arrow {
              width: 3.4375rem;
              height: 2.2175rem;
            }
          }
        }

        &:hover .grid-overlay {
          opacity: 1;
        }
      }

      .grid-image-container:hover .grid-overlay {
        opacity: 1;
      }

      .grid-item:hover .overlay-text {
        opacity: 0;
        /* 鼠标悬停时隐藏默认的文字 */
      }
    }
  }

  .btn-box {
    margin-top: 3.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      border: none;
      width: 15.125rem;
      height: 4.875rem;
      opacity: 1;
      font-size: 1.875rem;
      font-weight: 300;
      background: rgba(166, 166, 166, 1);
    }

    button:hover {
      background: rgba(241, 137, 27, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
}


.caseShow {
  padding-top: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;


  .topimage {
    width: 100%;
    height: 34.8125rem;
    position: relative;

    img {
      height: 100%;
      width: 100%;
    }

    .topimage-title {
      position: absolute;
      top: 60%;
      left: 20%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
      color: #fff;
      width: 45rem;
      height: 5.3125rem;
      text-decoration: underline
    }
  }

  .swiper-box {
    padding: 1.875rem 0 1.875rem 0;
    position: relative;
    margin-top: 9.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .swiper {
      right: 15.625rem;
      position: relative;
      width: 66.71rem;
      height: 44.5rem;

      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .swiper-content {
      position: absolute;
      left: 71.75rem;
      width: 37.0625rem;
      height: 32.5rem;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0 1.875rem 3.75rem -0.75rem rgba(50, 50, 93, 0.25), 0 1.125rem 2.25rem -1.125rem rgba(0, 0, 0, 0.3);
      padding: 1.875rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }

  .item-content-box {
    padding: 1.875rem 0 1.875rem 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    flex-direction: column;

    .content-title {
      width: 97.5rem;
      font-size: 2.625rem;
    }

    .content-hr-hr {
      width: 97.5rem;
      height: .0625rem;
      background-color: rgba(241, 137, 27, 1);
    }
  }

  .two-box-items {
    display: flex;
    justify-content: space-evenly;
    /* 使得两个盒子之间有空间 */
    padding-top: 3.75rem;
    width: 100%;
    height: auto;
    // margin: 0 3.375rem;
    /* 控制整体容器的左右边距 */

    .box-items-box {
      padding-left: 4.0625rem;
      width: 43.75rem;
      height: 36.75rem;
      opacity: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0rem .125rem .3125rem -0.0625rem rgba(50, 50, 93, 0.25), 0rem .0625rem .1875rem -0.0625rem rgba(0, 0, 0, 0.3);

      .box-title {
        height: 2.9375rem;
        display: flex;
        align-items: center;

        .hengxian {
          width: 5.1875rem;
          height: .1875rem;
          opacity: 1;
          background: rgba(241, 137, 27, 1);
        }

        .tiaozhan {
          font-size: 2.5rem;
          font-weight: 500;
          letter-spacing: .0625rem;
          color: rgba(56, 56, 56, 1);
        }
      }

      .box-two {
        width: 42.75rem;
        height: 8.8125rem;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: .0625rem;
      }

      .box-three {
        width: 42.75rem;
        height: 8.8125rem;
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .three-item-box {
          width: 42.75rem;
          height: 2.9375rem;
          display: flex;
          align-items: center;
          // justify-content: space-evenly;

          img {
            width: .8125rem;
            height: .8125rem;
          }

          span {
            margin-left: 2.1875rem;
            width: 35.5625rem;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: .0625rem;
          }
        }
      }


    }
  }

  .btn-box {
    margin-top: 3.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      border: none;
      width: 15.125rem;
      height: 4.875rem;
      opacity: 1;
      font-size: 1.875rem;
      font-weight: 300;
      background: rgba(166, 166, 166, 1);
    }

    button:hover {
      background: rgba(241, 137, 27, 1);
      color: rgba(255, 255, 255, 1);
    }
  }

  .bottom-add {
    margin-top: 6.25rem;
    width: 100%;
    height: 9.75rem;
    opacity: 1;
    background: rgba(241, 137, 27, 1);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .add-title {
      width: 69.75rem;
      height: 2.9375rem;
      font-size: 2.25rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .lianxi {
      width: 15.125rem;
      height: 4.875rem;
      border: .125rem solid rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.125rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);

    }
  }
}


.prup {
  width: 43.75rem;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .top {
    width: 100%;
    height: 6.0625rem;
    background: rgba(56, 56, 56, 1);
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-content {
    width: 100%;
    height: 24.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    .position {
      width: 37.375rem;
      height: 3.9419rem;

      .select-item {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }

    .numberinput {
      width: 37.375rem;
      height: 3.9419rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sub-btn-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}
</style>
